<template>
  <div>
    <template v-if="Array.isArray(data)">
      <template v-for="(item, index) in data" :key="index">
        <template v-if="index + 1 <= more">
          <VText :value="item" :line="line" v-if="index + 1 <= more"></VText>
        </template>
      </template>
      <div class="text-left">
        <el-button
          type="primary"
          link
          class="cursor-pointer text-[#3487FF]"
          v-if="hasMore"
          @click="open(data)"
          >查看更多<SvgIcon icon-class="DArrowRight" />
        </el-button>
      </div>
    </template>
    <template v-else-if="typeof data === 'object'">
      <template v-for="(value, key, index) in data" :key="key">
        <template v-if="index + 1 <= more">
          <VText
            :title="key"
            :value="value ? JSON.stringify(value) : ''"
            :line="line"
          ></VText>
        </template>
      </template>
      <!-- {{data}} -->
      <!-- {{Object.keys(data)}} -->
      <div class="text-left">
        <el-button
          type="primary"
          link
          class="cursor-pointer text-[#3487FF]"
          v-if="hasMore"
          @click="open(data)"
          >查看更多<SvgIcon icon-class="DArrowRight" />
        </el-button>
      </div>
    </template>
    <template v-else>
      <div>
        <VText :value="data" :line="line"></VText>
      </div>
    </template>
  </div>
</template>
<script setup lang="jsx">
import SvgIcon from "@/components/SvgIcon/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
  data: { type: [Object, Array, String, Number], default: () => ({}) },
  line: { type: Number, default: 1 },
  more: { type: Number, default: 1 },
});
const { data, line, more } = toRefs(props);
const hasMore = computed(() => {
  if (Array.isArray(data.value)) {
    return data.value.length > more.value;
  } else if (typeof data.value === "object" && data.value !== null) {
    return Object.keys(data.value).length > more.value;
  }
  return false; // 如果数据类型不是数组、对象或字符串，则默认为没有更多
});
// const hasMore = computed(() => {
//   console.log(Object.keys(data.value).length);
//   console.log(more.value);
//   return Object.keys(data.value).length > more.value
// });
const open = (val) => {
  // console.log(renderContent(val));
  const message = renderContent(val);
  ElMessageBox({
    title: "查看更多",
    message: `<div style="max-height:80vh;overflow:auto;">${message}</div>`,
    showCancelButton: true,
    showConfirmButton: false,
    cancelButtonText: "关闭",
    dangerouslyUseHTMLString: true,
  })
    .then(() => {
    })
    .catch((error) => {
    });
};
const renderContent = (val) => {
  if (Array.isArray(val)) {
    return val
      .map(
        (item) =>
          `<span class="text-[var(--base-text-color)] whitespace-pre-wrap break-all">${item}</span>`
      )
      .join("");
  } else if (typeof val === "object" || val !== null) {
    let nodes = Object.keys(val).map((key) => {
      return `<div class="flex"><div class="text-[var(--base-sub-text-color)]">${key}&nbsp;&nbsp;:&nbsp;&nbsp;</div><div class="text-[var(--base-text-color)] whitespace-pre-wrap break-all">${
        typeof val[key] === "string" ? val[key] : JSON.stringify(val[key])
      }</div></div>`;
    });
    return nodes.join("");
  } else {
    // 其他情况直接渲染文本
    return `<span class="text-[#333] whitespace-pre-wrap break-all">${val}</span>`;
  }
};
</script>
